<template>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th>消息id</th>
        <th>发起人</th>
        <th>消息头</th>
        <th>消息内容</th>
        <th>处理与否</th>
        <th>操作</th>
      </tr>
    </thead>


    <tbody>
      <tr v-for="i in list">

        <td>{{i.id}}</td>
        <td>{{i.user_username}}</td>
        <td>{{i.title}}</td>

        <td><textarea v-model="i.content" disabled></textarea></td>

        <td v-if="i.handle === 1">已处理</td>
        <td v-if="i.handle === 2">
          <span class="agree" @click="agreeClick(i)">同意</span>
          <span class="no-agree" @click="noAgreeClick(i)">不同意</span>
        </td>

        <td><span class="delete" @click="deleteClick(i.id)">删除</span></td>
      </tr>

    </tbody>

  </table>
</template>

<script>
  import {prefectUserInfo} from 'network/user'
  import {searchUserByUsername} from 'network/mix'
  import {updateMessage} from 'network/admin'

  export default {
    inject: ['reload'],
    name: "Table",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    data(){
      return {
        user: {}
      }
    },

    methods: {
      agreeClick(message) { // 同意
        let username = message.user_username
        message.handle = 1 // 修改为已处理
        this.applyBusiness(username, message)
      },
      noAgreeClick(message) { // 不同意
        message.handle = 1 // 修改为已处理
        updateMessage(message)
          .then(res => {
            console.log(res);
          })
          .catch(error => {
            console.log('更新消息失败！！！');
            console.log(error);
          })
        // this.$router.go(0)
      },
      deleteClick(id) { // 删除
        if (confirm('确认删除id=' + id + '的消息吗?')) {
          this.$emit('delete', {
            id: id,
          })
          // deleteMessage(id)
          //   .then(res => {
          //     this.$succ_ty_toast.toShow('id=' + id + '的消息删除成功', 5000)
          //     console.log(res);
          //     // this.$router.go(0)
          //
          //   })
          //   .catch(error => {
          //     console.log('删除消息失败！！！');
          //     console.log(error);
          //   })
        }
      },

      async applyBusiness(username, message) { // 同意成为商家的业务方法
        await searchUserByUsername(username)
          .then(res => {
            this.user = res.user
            // console.log('查询user');
            // console.log(res);
            // console.log(this.user);
            this.user.business = 1; // 修改为商家
          })
          .catch(error => {
            console.log('获取用户信息失败');
            console.log(error);
          })

        await prefectUserInfo(this.user) // 发送axios网络请求进行修改
          .then(res => {
            console.log(res);
            // this.$succ_ty_toast.toShow('修改用户信息' + this.formData.username + '成果', 5000);
            // this.$router.go(0)
          })
          .catch(err => {
            console.log('<完善信息>网络请求函数问题' + err);
          })

        await updateMessage(message)
          .then(res => {
            console.log(res);
          })
        .catch(error => {
          console.log('更新消息失败！！！');
          console.log(error);
        })

        // this.$router.go(0)
      }

      // mSearchUserByUsername(username) { // 通过用户名查询用户
      //   searchUserByUsername(username)
      //     .then(res => {
      //       this.user = res.user
      //       console.log('查询user');
      //       console.log(res);
      //       console.log(this.user);
      //     })
      //   .catch(error => {
      //     console.log('获取用户信息失败');
      //     console.log(error);
      //   })
      // },
      // mAlterUser() { // 修改用户信息为商家
      //   this.user.business = 1 // 修改为商家
      //   console.log('修改user');
      //   console.log(this.user);
        // prefectUserInfo(this.user) // 发送axios网络请求进行修改
        //   .then(res => {
        //     console.log(res);
        //     // this.$succ_ty_toast.toShow('修改用户信息' + this.formData.username + '成果', 5000);
        //     // this.$router.go(0)
        //   })
        //   .catch(err => {
        //     console.log('<完善信息>网络请求函数问题' + err);
        //   })
      // },
    }

  }
</script>

<style scoped>
  table thead tr {
    height: 50px;

    /*background-color: red;*/
  }
  table thead tr th { /*设置表头下划线*/
    border-bottom: 2px solid #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr {
    text-align: center;
    height: 50px;
    background-color: #fff;
  }
  table tbody tr td {
    border-bottom: 1px dashed #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr td img {
    height: 30px;
  }
  table tbody tr td span {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;

    color: white;
    border-radius: 6px;
    /*background-color: red;*/
  }
  table tbody tr td span:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  table tbody tr td .agree {
    background-color: #28a745;
  }
  table tbody tr td .no-agree {
    background-color: #888888;
  }
  table tbody tr td .delete {
    background-color: red;
  }

  td input {
    text-align: center;
    border: none;
    outline: none;
    font-size: 18px;
    background-color: #fff;

    /*background-color: yellow;*/
  }
  td textarea {
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;

    background-color: #fff;
  }
  td select {
    width: 100px;
  }
</style>